<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  const formLabelWidth = '120px'
  const dataForm = ref()
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    stateList:[] as Array<any>
  })
  interface formQuert {
    id:number
    game_name:string
    sort:number | string
    status:number
    scale:string
    diamond_value:number | string
    jump_url:string
    video_url:string
    default_url:string
    icon_url:string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    game_name: [{ required: true, trigger: 'blur', message: '请输入游戏名称' }],
    sort: [{ required: true, trigger: 'blur', message: '请输入排序值' }],
    status: [{ required: true, trigger: 'blur', message: '请选择展示状态' }],
    scale: [{ required: true, trigger: 'blur', message: '请输入视频比例' }],
    diamond_value: [{ required: true, trigger: 'blur', message: '请输入钻石限制数' }],
    jump_url: [{ required: true, trigger: 'blur', message: '请输入跳转地址' }],
    video_url: [{ required: true, trigger: 'blur', message: '请上传封面视频' }],
    default_url: [{ required: true, trigger: 'blur', message: '请上传默认图片' }],
    icon_url: [{ required: true, trigger: 'blur', message: '请上传icon缩略图' }],

  }
  const msgType = [
    {key:0,label:'文字信息'},
    {key:1,label:'图文信息'},
  ]
  // const radioPageChange = (e:any=0)=>{
    
  // }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const loading = Toastloading()
      gamesApi.setGamePages(form).then(res=>{
        loading.close()
        ToastSuccess(form.id?'编辑成功':'新增成功')
        closeDialog()
        $emit('updateList')
      }).catch(()=>{
        loading.close()
      })
      
    })
  }
  const openDialog = (query:any = {})=> {
    const {
      id=0, game_name='', sort='', status=2, stateList=[],
      scale='1:1', diamond_value='', jump_url='', video_url='',
      default_url='', icon_url='',
    } = query
    const object:any = {
      game_name, sort, status, default_url, icon_url,
      scale, diamond_value, jump_url, video_url
    }
    if(id) object['id'] = id
    Object.assign(form,object)
    action.stateList = stateList
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    form = reactive({} as formQuert)
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
    top="5vh"
    class="xm-dialog input-width"
    v-model="action.dialogFormVisible"
    :close-on-click-modal="action.disabled"
    :show-close="action.disabled"
    :close-on-press-escape="action.disabled"
    width="60%"
    title="一起玩列表新增">
      <el-form ref="dataForm" :model="form" :rules="formRules">
        <el-form-item :label-width="formLabelWidth" label="游戏名称" prop="game_name">
          <el-input
            v-model="form.game_name"
            placeholder="请输入游戏名称" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="排序值" prop="sort">
          <el-input
            v-model="form.sort"
            @input="allNumber(form,'sort')"
            placeholder="请输入排序值" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="展示状态" prop="status">
          <el-select
          v-model="form.status"
          placeholder="请选择展示状态">
            <el-option
              v-for="item in action.stateList"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="视频比例" prop="scale">
          <el-input
            v-model="form.scale"
            placeholder="请输入视频比例" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="钻石限制" prop="diamond_value">
          <el-input
            v-model="form.diamond_value"
            @input="allNumber(form,'diamond_value')"
            placeholder="请输入钻石限制数" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="跳转链接" prop="jump_url">
          <el-input
            v-model="form.jump_url"
            :autosize="{ minRows: 2, maxRows: 2}"
            type="textarea"
            placeholder="请输入跳转地址"
          />
        </el-form-item>
        <div class="flex">
          <div>
            <el-form-item :label-width="formLabelWidth" label="默认图片" prop="default_url">
              <xmUpload v-model:file-url="form.default_url" :data="{type:28}" />
            </el-form-item>
          </div>
          <div>
            <el-form-item :label-width="formLabelWidth" label="icon缩略图" prop="icon_url">
              <xmUpload v-model:file-url="form.icon_url" :data="{type:28}" />
            </el-form-item>
          </div>
        </div>
        <el-form-item :label-width="formLabelWidth" label="视频" prop="video_url">
          <xmUpload v-model:file-url="form.video_url" listType="text" :data="{type:28}" />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>